<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/weixi/Public/css/bootstrap.min.css">
    <title>新增收货人信息</title>
    <style>
        *{
            box-sizing: border-box;     /*从IE8开始兼容*/
            text-size-adjust:none;
        }
        /*img{*/
        /*max-width: 100%;*/
        /*}*/
        ul,li{
            list-style: none;margin: 0;padding:0;
        }
        html,body, .container{
            height:100%;margin:0;padding:0;
        }
        span{
            display: inline-block;
        }
        .container{
            max-width: 640px;min-width: 320px;margin: auto;
        }
        /*header{*/
            /*height:8%; display:flex;background: #3f3f3f;width: 100%;color: white;font-size: 20px;*/
        /*}*/
        /*header>div{*/
            /*text-align: center; height: 100%;align-items: center; display:flex;*/
        /*}*/
        section{
            height:91%; background: #eeeeee;width: 100%;overflow: scroll;
        }
        .section-header{
            background: #c53b13;display:flex;height: 50px;
        }
        .section-header>div{
            text-align: center; height: 100%;align-items: center; display:flex;
        }
        .register:hover{
            color: #ef3712;
        }

        footer{
            height:9%; width: 100%;border-top:1px #b2b2b2 solid ;display:flex;color: grey;
        }
        footer>div{
            width: 25%;height: 100%;
        }
        footer img{
            margin-top: 5%;margin-left:40% ;
        }
        .footer-member a:link{
            color: grey;text-decoration:none;font-size:13px;
        }
        .footer-member a:visited {
            color:grey;text-decoration:none;font-size:13px;
        }
        .footer-member  a:hover {
            color: #2536ff;font-size:13px;
        }
    </style>
    <script src="/weixi/Public/js/jquery-1.11.1.min.js"></script>
    <script src="/weixi/Public/js/bootstrap.min.js"></script>
    <script src="/weixi/Public/js/jquery.nivo.slider.js" type="text/javascript" charset="UTF-8" ></script>
    <link rel="stylesheet" href="/weixi/Public/em-ui/index.css">
    <script type="text/javascript">
        $(function () {
            $("#return").click(function () {
                window.history.back(-1);
            })
        })
    </script>
</head>
<body>
<div class="container">
    <section>
        <div class="section-header" style="width: 100%">
            <div style="width: 16%;height: 100%;" id="return"><span class="glyphicon glyphicon-chevron-left" style="color: white;display: inline-block;margin: auto;font-size: 20px"></span></div>
            <div style="width: 70%;height: 100%;color: white;"><span style="display: inline-block;margin: auto;font-size: 20px">新增收货人信息</span></div>
        </div>
        <div class="section-content" >
            <div class="Login" style="position: relative">
                <div id="app" >
                    <div >
                        <div class="modal-body">
                            <div v-if="mes" class="alert alert-danger">{{mes}}
                                <button class="close" @click="mes=''">&times;</button>
                            </div>
                            <el-form ref="lgoinForm" :model="logindata" :rules="rules" label-width="80px">
                            <el-form-item label="收  货  人" prop="names">
                                <el-input v-model="logindata.names" style="width: 90%" />
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phones">
                                <el-input v-model="logindata.phones"  style="width: 90%"/>
                            </el-form-item>
                                <el-form-item label="详细地址" prop="address">
                                    <el-input v-model="logindata.address"  style="width: 90%"/>
                                </el-form-item>
                                <el-form-item label="邮政编码" prop="you">
                                    <el-input v-model="logindata.you"  style="width: 90%"/>
                                </el-form-item>
                        </el-form>
                            <div class="row" style="width: 100%">
                                    <el-button @click="dologin()" style="width: 90%;float: right;background: #d33c13;height: 40px;color: white;font-size: 16px">新增收货地址</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="footer-member"><a href="{:U('Main/index')}"><img src="/weixi/Public/img/img2-1.png"><div style="text-align: center;font-size: 14px;margin-top: 5%">首页</div></a></div>
        <div class="footer-member"><a href="{:U('Classify/index')}"><img src="/weixi/Public/img/img2-2.png"><div style="text-align: center;font-size: 14px;margin-top: 5%">分类</div></a></div>
        <div class="footer-member"><a href="{:U('Shopping/index')}"><span class="glyphicon glyphicon-shopping-cart" style="color: #a2a2a2;font-size: 24px;display: block;margin-top: 5%;margin-left:35% ;" ></span>
            <div style="text-align: center;font-size: 14px;margin-top: 5%">购物车</div></a>
        </div>
        <div class="footer-member"><a href="#" ><img src="/weixi/Public/img/img2-4.png" ><div style="text-align: center;font-size: 14px;margin-top: 5%">会员中心</div></a></div>
    </footer>
</div>
<script src="/weixi/Public/js/vue.min.js"></script>
<script src="/weixi/Public/js/vue-resource.min.js"></script>
<script src="/weixi/Public/em-ui/index.js"></script>
<script src="/weixi/Public/js/jquery-1.11.1.min.js"></script>
<script src="/weixi/Public/js/bootstrap.min.js"></script>
<script>
    Vue.http.options.emulateJSON=true;
    new Vue({
        el: "#app",
        data: {
            mes: '',
            logindata: {},
            rules: {
                names: {required: true, message: '请输入收货人姓名(必填)'},
                phones: {required: true, message: '请输入电话(必填)'},
                address: {required: true, message: '请输入详细地址(必填)'},
                you: {required: true, message: '请输入邮政编码(必填)'}
            }
        },
        methods:{
            dologin(){
                this.$refs.lgoinForm.validate(valid => {
                    if (!valid) {
                        return;
                    }
                    this.$http.post('/weixi/Home/Reg/orders',this.logindata).then(resp =>{
                        let result = resp.data;
                        if(result.status){
//                            self.location='http://rty.tunnel.qydev.com/weixi/index.php/Home/Main/index';
//                            window.location.href="http://rty.tunnel.qydev.com/weixi/index.php/Home/Main/index";
                            location ="http://rty.tunnel.qydev.com/weixi/index.php/Home/Main/order";
                        }else{
                            this.mes= result.error;
                        }
                    })
                });
            }
        }
    })
</script>
</body>
</html>